<template>
    <div class="comment-reply">
        <div class="reply-btn" @click="onReply">回复</div>

        <div class="reply-box" v-show="isShow">
            <el-input
                v-model="comment"
                type="textarea"
                class="comment-input"
                resize="none"
                :autosize="{ minRows: 4, maxRows: 4 }"
                maxlength="300"
                :placeholder="'回复' + props.toUName + '：'"
            ></el-input>

            <div class="tools">
                <EmojiPickerP @select-emoji="onSelectEmoji" />

                <div class="btn-group">
                    <el-button
                        onfocus="this.blur()"
                        type="primary"
                        size="small"
                        @click="onSend"
                        :loading="isBtnLoading"
                    >
                        回复
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";

const emits = defineEmits(["success"]);

const props = defineProps({
    commentId: {
        type: Number,
        default: 0,
    },
    toUid: {
        type: Number,
        default: 0,
    },
    toUName: {
        type: Number,
        default: "",
    },
    examcaseId: {
        type: Number,
        default: 0,
    },
});

const { isBtnLoading, isShow, comment, onSelectEmoji, onSend, onReply } =
    useContent(props, emits);
</script>
<style lang="scss" scoped>
.comment-reply {
    width: 100%;
    margin-top: 10px;

    .reply-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 26px;
        background-color: #ebedef;
        color: #333;
        font-size: 12px;
        border-radius: 4px;
        user-select: none;
        cursor: pointer;
    }

    .reply-box {
        width: 100%;

        .comment-input {
            margin-top: 5px;
        }

        :deep(.el-textarea__inner) {
            background-color: #f1f1f1;
        }

        .tools {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;

            .btn-group {
                display: flex;
                justify-content: flex-end;

                .el-button {
                    width: 70px;
                    height: 30px;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>
